<template>
  <div class="todo-footer">
   <label for="">
    <input type="checkbox" v-model="f" >
   </label>
   <span><span>已经完成{{con}}</span>/全部{{todos?.length}}</span>
   <button class="btn btn-danger" @click="qc">清楚全部已经完成的任务</button>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent,ref } from "@vue/runtime-core";
import { Todo } from "@/types/todo";
import Bus  from "./bus";
import bus from "./bus";
export default defineComponent({
  name:"Footer",
  props:{
qx:{
    type:Function,
    require:true,
},
todos:{
  type:Array as ()=>Todo [],
  require:true
}
  },
  setup(props){
   
   let con:any=computed(()=>{
    return props.todos?.reduce((a,b)=>b.isCompleted?a+1:a+0,0)
   })
   let f=computed({
    get(){
       return con.value>0&&props.todos?.length==con.value
    },
    set(val){
      if(typeof props.qx=='function'){
         props.qx(val)
      }
    }
   })
   let qc=()=>{
     Bus.$emit('qc')
   }
   return{
    f,
    con,
    qc
   }
  }

})
</script>

<style scoped>
.todo-footer{
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
}
.todo-footer label{
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}
.todo-footer label input{
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}
    
.todo-footer button{
    float: right;
    margin-top: 5px;
}
</style>